<template>
  <Teleport :to="container" :disabled="stay">
    <ee-popup ref="root" v-bind="__attrs" :on-show="durationBegin" @out="close?.(true);" :animation="animations"
              scrollable :class="`ee-notify ${$options.name} ${color} plain`" overlay="none">
      <ee-button v-if="closeable" plain class="closeable" @click="ref.modelValue = false">
        <slot name="close">
          <ee-shape shape="close" />
        </slot>
      </ee-button>

      <slot name="icon">
        <ee-shape :icon="icon" />
      </slot>

      <div class="content">
        <h3 class="title" v-if="title">
          <slot name="title">
            {{ title }}
          </slot>
        </h3><template v-else />

        <div class="text" v-if="html || text || $slots.default">
          <slot name="text">
            <div v-if="html" v-html="html"></div><template v-else />
            <div v-if="text" v-text="text"></div><template v-else />
          </slot>
          <slot></slot>
        </div><template v-else />
      </div>
    </ee-popup>
  </Teleport>
</template>

<script type="text/javascript">
import refs from '../__mixin/relation/refs';
import scoped from '../__mixin/scoped';
import { props } from './ee-notify';
import { textProps, titleProps, durationMixin, teleportMixin } from './options'
/**
 * @property {} default - 内容
 * @property {} default.icon - 上方图标
 * @property {} default.text - 下方文字
 */
export default {
  name: "ee-notify",
  mixins: [refs, scoped, durationMixin, teleportMixin],
  inheritAttrs: false,
  props: {
    ...textProps,
    ...titleProps,
    ...props,
    closeable: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: Number,
      // default: 10000,
    }
  },
  computed: {
    animations() {
      const array = ['visible'];
      const move = this.position.split('-')[1];
      if (move)
        array.push('move', move);
      return array;
    },
  },
}
</script>

<style lang="scss">
.ee-notify-container {
  position: fixed;
  padding: 1em;
}

#ee-notify-top-right {
  top: 0;
  right: 0;
}

#ee-notify-top-left {
  top: 0;
  left: 0;
}

#ee-notify-bottom-right,
#ee-notify-bottom-left {
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 0;

  & > * {
    margin-top: 0;
  }
}

#ee-notify-bottom-right {
  right: 0
}

#ee-notify-bottom-left {
  left: 0
}

.ee-notify {
  background-color: var(--ee-bgcolor);
  box-shadow: 0 .125em .75em .125em rgba(0, 0, 0, .1);
  width: min(20em, 88vw);
  max-height: 88vh;
  border-radius: .5em;
  display: flex;
  overflow: hidden;
  padding: 1.25em 1.5em;
  margin: 0 0 1em auto;
  position: relative;

  &.eet.move {
    position: relative;
  }

  .closeable {
    position: absolute;
    margin-top: -0.25em;
    margin-right: 1em;
    right: 0;
    font-size: 1em;
    border: none;
    padding: 0.4em;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ee-bgcolor);
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    margin-right: .75em;
  }

  &.visible:not(.in) .icon {
    width: 0;
    height: 0;
  }

  .content {
    flex: 1;
    overflow: auto;
    // color: var(--ee-dialog-text);
    padding-right: 1.5em;
    word-break: break-word;

    :first-child {
      padding-bottom: .5em;
    }

    :last-child {
      padding-bottom: 0;
    }

    .title {
      font-size: 1em;
      font-weight: normal;
      margin: 0;
    }

    .text {
      line-height: 1.5;
      font-size: .875em;
    }
  }
}
</style>